<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" ref="filters" :size="size">
        <el-form-item prop="orderNo">
          <el-input v-model="filters.orderNo" placeholder="订单编号"></el-input>
        </el-form-item>
        <el-form-item prop="parentOrderNo">
          <el-input v-model="filters.parentOrderNo" placeholder="订单父编号"></el-input>
        </el-form-item>
        <el-form-item prop="storeName">
          <el-input v-model="filters.storeName" placeholder="店铺名称"></el-input>
        </el-form-item>
        <el-form-item prop="buyTimeStart">
          <el-date-picker
            v-model="filters.buyTimeStart" value-format="yyyy-MM-dd"
            type="date"
            placeholder="下单开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="buyTimeEnd">
          <el-date-picker
            v-model="filters.buyTimeEnd" value-format="yyyy-MM-dd"
            type="date"
            placeholder="下单结束日期">
          </el-date-picker>
      </el-form-item>
        <el-form-item>
          <kt-button
            icon="fa fa-search"
            :label="$t('action.search')"
            type="primary"
            @click="findPage(null)"
          />
        </el-form-item>
        <el-form-item>
          <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
        </el-form-item>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      :showEditOperation="false"
      :showBatchDelete="false"
      :showDeleteOperation="false"
      :showDetailOperation="true"
      @findPage="findPage"
      @selectionChange="selectionChange"
      ref="CyTable"
    ></cy-table>

  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
export default {
  components: {
    PopupTreeInput,
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      size: "small",
      readonly: true,
      list: [],
      listStatus: [],
      tableData: [],
      orderNumber: "", //订单号
      filters: {
        parentOrderNo: null,
        orderNo: null,
        storeName: null,
        buyTimeStart: null,
        buyTimeEnd: null,
        start: 1,
        limit: 10,
        url:'jic-order/orderManager/queryPage'
      },
      operation: false, // true:新增, false:编辑
      filterColumns: [
        { prop: "orderNo", label: "订单编号", minWidth: 120 },
        { prop: "merchantId", label: "销售商家ID", minWidth: 120 },
        { prop: "merchantName", label: "销售商家名称", minWidth: 120 },
        { prop: "storeId", label: "销售店铺ID", minWidth: 120 },
        { prop: "storeId", label: "销售店铺名称", minWidth: 120 },
        { prop: "buyTime", label: "下单日期", minWidth: 120 },
        { prop: "buyerId", label: "下单会员ID", minWidth: 120 },
        { prop: "buyerId", label: "下单会员账号", minWidth: 120 },
        { prop: "saleTotalAmount", label: "销售总金额", minWidth: 120 },
        { prop: "discountTotalAmount", label: "优惠总金额", minWidth: 120 },
        { prop: "buyTotalAmount", label: "购买总金额", minWidth: 120 },
        { prop: "expressTotalFee", label: "物流费", minWidth: 120 },
        { prop: "actualPayTotalAmount", label: "实付总金额", minWidth: 120 },
        { prop: "orderStatus", label: "订单状态", minWidth: 120 },
        { prop: "createTime", label: "创建时间", minWidth: 120 },
        { prop: "mark", label: "备注", minWidth: 120 }

      ],
      pageResult: {},

      dialogVisible: false, // 新增编辑界面是否显示
      dialogVisibleOrder: false, // 确认订单显示
      dialogVisibleCancelOrder: false, //取消订单显示
      dialogVisibleOrderDetail: false, //订单详情显示
      editLoading: false
    };
  },

  methods: {
    // 获取分页数据
    findPage: function(data) {
      this.$refs.CyTable.findPage(this.filters);
    },

    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
      }
    },

    mounted() {
      this.findPage();
    }
  }
};
</script>

<style scoped>
/deep/ .el-input--small .el-input__inner{
    height: 32px;
}
</style>s
